<template>
  <div class="h-full w-full">
    <h1>Welcome to the homepage</h1>
    <button v-for="locale in locales" @click="setLocale(locale.code)">
      {{ locale.name }}
    </button>
    <LazyElButton type="warning">lazy button</LazyElButton>
    <div>{{ t('welcome') }}</div>
    <NuxtLink to="/service">service</NuxtLink>
    <div class="animated animated-shake-y">动画</div>
    <div class="border border-red border-solid lg:border-blue md:border-green"></div>
    <RenderWhenVisible :component="loadA" />
    <RenderWhenVisible :component="loadB" />
    <RenderWhenVisible :component="loadC" />
  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  title: 'Homepage',
  meta: [{ name: 'description', content: 'This is the homepage of the website' }],
  layout: 'default',
});

const { locales, setLocale, t } = useI18n();
const loadA = () => import('~/components/home/a.vue');
const loadB = () => import('~/components/home/b.vue');
const loadC = () => import('~/components/home/c.vue');
</script>
